<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTS功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        textarea {
            height: 100px;
            resize: vertical;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .audio-player {
            width: 100%;
            margin-top: 20px;
        }
        .loading {
            text-align: center;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎵 TTS语音合成测试</h1>
        
        <form id="ttsForm">
            <div class="form-group">
                <label for="text">文本内容:</label>
                <textarea id="text" name="text" placeholder="请输入要转换为语音的文本" required>你好，这是一个语音合成测试。</textarea>
            </div>
            
            <div class="form-group">
                <label for="model">语音模型:</label>
                <select id="model" name="model">
                    <option value="sambert-zhichu-v1">知厨</option>
                    <option value="sambert-zhida-v1">知达</option>
                    <option value="sambert-zhijia-v1">知佳</option>
                    <option value="sambert-zhimiao-emo-v1">知妙</option>
                    <option value="sambert-zhimao-v1">知猫</option>
                    <option value="sambert-zhifei-v1">知飞</option>
                    <option value="sambert-beth-v1">Beth (英文)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="format">音频格式:</label>
                <select id="format" name="format">
                    <option value="WAV">WAV</option>
                    <option value="MP3">MP3</option>
                    <option value="PCM">PCM</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="sampleRate">采样率:</label>
                <select id="sampleRate" name="sampleRate">
                    <option value="8000">8000 Hz</option>
                    <option value="16000" selected>16000 Hz</option>
                    <option value="22050">22050 Hz</option>
                    <option value="44100">44100 Hz</option>
                    <option value="48000">48000 Hz</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="volume">音量 (0-100):</label>
                <input type="range" id="volume" name="volume" min="0" max="100" value="50">
                <span id="volumeValue">50</span>
            </div>
            
            <div class="form-group">
                <label for="rate">语速 (0.5-2.0):</label>
                <input type="range" id="rate" name="rate" min="5" max="20" value="10" step="1">
                <span id="rateValue">1.0</span>
            </div>
            
            <div class="form-group">
                <label for="pitch">语调 (0.5-2.0):</label>
                <input type="range" id="pitch" name="pitch" min="5" max="20" value="10" step="1">
                <span id="pitchValue">1.0</span>
            </div>
            
            <button type="submit" id="submitBtn">🎵 开始合成</button>
        </form>
        
        <div id="status" class="status" style="display: none;"></div>
        
        <div id="audioSection" style="display: none;">
            <h3>合成结果:</h3>
            <audio id="audioPlayer" class="audio-player" controls>
                您的浏览器不支持音频播放
            </audio>
            <button id="downloadBtn" style="margin-top: 10px;">💾 下载音频</button>
        </div>
    </div>

    <script>
        // 更新滑块值显示
        function updateRangeValue(rangeId, valueId, multiplier = 1) {
            const range = document.getElementById(rangeId);
            const value = document.getElementById(valueId);
            range.addEventListener('input', function() {
                value.textContent = (this.value * multiplier / 10).toFixed(1);
            });
        }

        updateRangeValue('volume', 'volumeValue', 1);
        updateRangeValue('rate', 'rateValue', 1);
        updateRangeValue('pitch', 'pitchValue', 1);

        // 表单提交
        document.getElementById('ttsForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const requestData = {
                text: formData.get('text'),
                model: formData.get('model'),
                format: formData.get('format'),
                sampleRate: parseInt(formData.get('sampleRate')),
                volume: parseInt(formData.get('volume')),
                rate: parseFloat(formData.get('rate')) / 10,
                pitch: parseFloat(formData.get('pitch')) / 10,
                enableWordTimestamp: false,
                enablePhonemeTimestamp: false,
                streamMode: false
            };

            // 显示加载状态
            showStatus('正在合成语音，请稍候...', 'info');
            document.getElementById('submitBtn').disabled = true;
            document.getElementById('audioSection').style.display = 'none';

            try {
                console.log('发送请求数据:', requestData);
                
                const response = await fetch('/api/tts/synthesize', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                });

                console.log('响应状态:', response.status);
                console.log('响应头:', Object.fromEntries(response.headers.entries()));

                if (response.ok) {
                    // 获取音频数据
                    const audioBlob = await response.blob();
                    console.log('音频数据大小:', audioBlob.size, '字节');
                    
                    const audioUrl = URL.createObjectURL(audioBlob);
                    
                    // 设置音频播放器
                    const audioPlayer = document.getElementById('audioPlayer');
                    audioPlayer.src = audioUrl;
                    
                    // 显示成功状态
                    showStatus('语音合成成功！', 'success');
                    document.getElementById('audioSection').style.display = 'block';
                    
                    // 设置下载按钮
                    document.getElementById('downloadBtn').onclick = function() {
                        const link = document.createElement('a');
                        link.href = audioUrl;
                        link.download = `tts_test_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.${requestData.format.toLowerCase()}`;
                        link.target = "_blank";
                        link.click();
                    };
                    
                } else {
                    const errorData = await response.json();
                    console.error('错误响应:', errorData);
                    showStatus(`合成失败: ${errorData.message}`, 'error');
                }
            } catch (error) {
                console.error('请求失败:', error);
                showStatus(`请求失败: ${error.message}`, 'error');
            } finally {
                document.getElementById('submitBtn').disabled = false;
            }
        });

        // 显示状态信息
        function showStatus(message, type) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = `status ${type}`;
            status.style.display = 'block';
        }
    </script>
</body>
</html> 